<script lang="ts" setup>
interface Props {
  src: string
  previewSrcList: any
}

const props = defineProps<Props>()
</script>

<template>
  <el-image
    style="width: 32px; height: 32px; vertical-align: middle"
    fit="cover"
    :src="props.src"
    :preview-src-list="props.previewSrcList"
    :z-index="6000"
  >
    <template v-slot:error>
      <div class="img-error-container">
        <img src="../../assets/pic_default.png" class="default-image" />
      </div>
    </template>
  </el-image>
</template>

<style lang="scss" scoped>
@import "@/styles/mixins.scss";

.img-error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;

  .default-image {
    width: 100%;
    height: 100%;
  }
}
</style>
